// @media screen and (min-width: 1200px) {
//   .page-container {
//     width: 100%;
//   }
// }

@media screen and (max-width: 1200px) {
  .page-container {
    width: 100% !important;

    .page-content {
      margin-left: 10px;
      margin-right: 10px;
    }

    .page-header {
      .header-container {
        width: 100% !important;
        padding: 0 0;
        box-sizing: border-box;

        .header-home-btn {
          margin-left: 36px;
        }

        .left-nav-btn {
          display: block;
        }
        .right-nav-btn {
          display: block;
        }
      }
    }

    .page-summary {
      display: none;

      &.view-show {
        display: block;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 200;
        margin-bottom: 0;
      }

      &.view-hide {
        display: none;
      }
    }
    .page-sider {
      display: none;

      &.view-show {
        display: block;
        position: fixed;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 200;
        margin-bottom: 0;
        left: unset;
      }

      &.view-hide {
        display: none;
      }
    }
    
  }
}